import { Radio } from 'antd';
import type { SizeType } from 'antd/es/config-provider/SizeContext';
import { useEffect, useState } from 'react';
import styles from './index.module.less';

export const Ranking = () => {
  useEffect(() => {}, []);

  const [size, setSize] = useState<SizeType>('large'); // default is 'middle'
  const tableInfo = () => {
    return (
      <div style={{ width: '95%' }}>
        <div className={styles.tabHeader}>
          <span />
          <span>实际达成</span>
          <span>目标</span>
          <span>达成率</span>
        </div>
        <div className={styles.tabTr}>
          <span>张三商贸</span>
          <span>12,445</span>
          <span>12,445</span>
          <span>12%</span>
        </div>
        <div className={styles.tabTr}>
          <span>张三商贸</span>
          <span>12,445</span>
          <span>12,445</span>
          <span>12%</span>
        </div>
      </div>
    );
  };

  return (
    <div className={styles.ranking}>
      <div className={styles.radioButton}>
        <Radio.Group value={size} onChange={(e) => setSize(e.target.value)}>
          <Radio.Button value="large">总量</Radio.Button>
          <Radio.Button value="default">超高端</Radio.Button>
          <Radio.Button value="small">高端</Radio.Button>
          <Radio.Button value="small1">中高端</Radio.Button>
        </Radio.Group>
      </div>
      <div className={styles.ranking1}>
        <div className={styles.titleRanking}>
          <div className={styles.title}>综合达成排行</div>
          <div className={styles.forName}>{tableInfo()}</div>
        </div>
        <div className={styles.titleRanking}>
          <div className={styles.title}>重点二批达成排行</div>
          {tableInfo()}
        </div>
      </div>
    </div>
  );
};
